<!--
 * @Description: 添加窗帘工单
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-04-11 19:56:36
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/mods/add/index.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    v-dialogDrag
    :title="title"
    :visible.sync="shows"
    width="960px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="86px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="房间" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入房间" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品名" prop="workorderCode">
            <div @click="handlePart">
              <el-input
                v-model="form.workorderCode"
                readonly
                placeholder="请输入品名"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="宽" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入宽" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="高" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入高" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单价" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入单价" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="加工方式" prop="workorderCode">
            <el-input
              v-model="form.workorderCode"
              placeholder="请输入加工方式"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="分片" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入分片" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="方向" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入方向" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="明细" prop="workorderCode">
            <div @click="handleDetail">
              <el-input v-model="form.workorderCode" placeholder="请输入明细" />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="数量" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入数量" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="小计" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入小计" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="图" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入图" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="加工备注" prop="workorderCode">
            <el-input
              v-model="form.workorderCode"
              placeholder="请输入加工备注"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="复杂加工" prop="workorderCode">
            <el-input
              v-model="form.workorderCode"
              placeholder="请输入复杂加工"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="布绑" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入布绑" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="余料" prop="workorderCode">
            <el-input v-model="form.workorderCode" placeholder="请输入余料" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
    <!-- 品名 -->
    <part-view v-if="part" :show.sync="part.show" v-bind="part"></part-view>
    <!-- 价格明细 -->
    <detail-view
      v-if="detail"
      :show.sync="detail.show"
      v-bind="detail"
    ></detail-view>
  </el-dialog>
</template>

<script>
import PartView from "./part.vue";
import DetailView from "./detail.vue";
import { genCode } from "@/api/system/autocode/rule";

export default {
  components: {
    PartView,
    DetailView,
  },
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      //自动生成编码
      autoGenFlag: false,
      // 表单参数
      form: {
        workorderCode: "",
      },
      // 表单校验
      rules: {
        workorderCode: [
          { required: true, message: "工单编码不能为空", trigger: "blur" },
        ],
        workorderName: [
          { required: true, message: "工单名称不能为空", trigger: "blur" },
        ],
        orderSource: [
          { required: true, message: "来源类型不能为空", trigger: "blur" },
        ],
        productId: [
          { required: true, message: "产品不能为空", trigger: "blur" },
        ],
        productCode: [
          { required: true, message: "产品编号不能为空", trigger: "blur" },
        ],
        productName: [
          { required: true, message: "产品名称不能为空", trigger: "blur" },
        ],
        unitOfMeasure: [
          { required: true, message: "单位不能为空", trigger: "blur" },
        ],
        quantity: [
          { required: true, message: "生产数量不能为空", trigger: "blur" },
        ],
        requestDate: [
          { required: true, message: "需求日期不能为空", trigger: "blur" },
        ],
      },
      part: {
        show: false,
        data: null,
      },
      detail: {
        show: false,
        data: null,
      },
    };
  },
  computed: {
    title() {
      return {
        add: "新增",
        edit: "编辑",
        copy: "查看",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  methods: {
    /** 自动生成编码 */
    handleAutoGenChange(autoGenFlag) {
      if (autoGenFlag) {
        genCode("WORKORDER_CODE").then((response) => {
          this.form.workorderCode = response;
        });
      } else {
        this.form.workorderCode = null;
      }
    },
    /** 选择品名 */
    handlePart() {
      this.part = {
        show: true,
      };
    },
    /** 价格明细 */
    handleDetail() {
      this.detail = {
        show: true,
      };
    },
    /** 提交按钮 */
    async submitForm() {
      try {
        await this.$refs["form"].validate();
        console.log(this.form);
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>
